<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>唯品会</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <style>
    </style>
</head>

<body>
    <header>
        <!-- *******  -->
        <div class="header-top">
            <div class="header container clearfix">
                <div class="header-left a">
                    <a href="#">河南<span class="sp1"></span></a>
                    <div class="box box-1">
                        <section class="section"></section>
                        <h4>请选择所在的收货地址</h4>
                        <p>A&#x3000; <a href="#">安徽</a>&#x3000;<a href="#">澳门</a></p>
                        <p>B &#x3000;<a href="#">北京</a></p>
                        <p>C&#x3000; <a href="#">重庆</a></p>
                    </div>
                </div>
                <ul>
                    <ul class="header-right">
                        <li class="a">
                            <a href="#">请登录</a>/
                            <div class="box box-2">
                                <section class="section2"></section>
                                <span class="header-2"></span>
                                <p><a href="#">您好 ! [请登录]&#x3000;&#x3000;&#x3000;&#x3000;</a></p>
                                <ul class="denglu">
                                    <li><a href="#">我的收藏</a></li>
                                    <li><a href="#">我的订单</a></li>
                                    <li><a href="#">零钱</a></li>
                                    <li><a href="#">我的优惠券</a></li>
                                    <li><a href="#">我的唯品币</a></li>
                                    <li><a href="#">唯品金融</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">注册</a>/</li>
                        <li class="b">
                            <a href="#"><img src="img/header_sign.gif" alt="" class="header_sign">签到有礼</a>/
                            <div class="box-8">
                                <span class="header-4"></span>
                                <span class="header-3"><a href="">1天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">2天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">3天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">4天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">5天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">6天</a></span>
                                <div class="hr"></div>
                                <span class="header-3"><a href="">7天</a></span>
                                <section class="qiandao">
                                    <a href="#">每天签到送惊喜,连续签到更享心动奖励</a>
                                    <section class="button">签到</section>
                                </section>
                            </div>
                        </li>
                        <li><a href="#">我的订单</a>/</li>
                        <li class="a">
                            <a href="#">我的特卖<span class="sp2"></span></a>/
                            <ul class="box box-3">
                                <section class="section3"></section>
                                <li><a href="#">商品收藏(0)</a></li>
                                <li><a href="#">品牌收藏(0)</a></li>
                                <li><a href="#">我的足迹(0)</a></li>
                            </ul>
                        </li>
                        <li class="a">
                            <a href="#">会员俱乐部<span class="sp2"></span></a>/
                            <ul class="box box-4">
                                <li><a href="#">俱乐部首页</a></li>
                                <li><a href="#">唯品币兑换</a></li>
                                <li><a href="#">免费抽大奖</a></li>
                            </ul>
                        </li>
                        <li class="a">
                            <a href="#">客户服务<span class="sp2"></span></a>/
                            <ul class="box box-5">
                                <li><a href="#">联系客服</a></li>
                                <li><a href="#">帮助中心</a></li>
                                <li><a href="#">服务中心</a></li>
                                <li><a href="#">知识产权投</a></li>
                            </ul>
                        </li>
                        <li class="a">
                            <a href="#"><span class="header-1"></span>手机版</a>/
                            <ul class="box box-6">
                                <section class="section6"></section>
                                <li><img src="img/qr.jpg" alt="" class="qr"></li>
                                <li><b><a href="">随时逛 及时抢</a></b></li>
                            </ul>
                        </li>
                        <li class="a">
                            <a href="#">更多<span class="sp2"></span></a>
                            <div class="box box-7">
                                <section class="section7"></section>
                                <div>
                                    <h5>合作专区</h5>
                                    <p><a href="#">联名卡申请</a><a href="#">唯品卡</a><a href="#">支付专区</a></p>
                                </div>
                                <h5>关于我们</h5>
                                <p><a href="#">Sell on vip</a><a href="#">品牌招商</a><a href="#">官方博客</a></p>
                            </div>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
        <!-- *******  -->
        <div class="container vip">
            <div class="logo"><a href="#"><img src="img/logo.png" alt=""></a></div>
            <ul class="vip-right">
                <li><a href="#"><img src="img/logo_img01.png" alt=""></a></li>
                <li><a href="#"><img src="img/logo_img02.png" alt=""></a></li>
                <li><a href="#"><img src="img/logo_img03.png" alt=""></a></li>
                <li class="shopping">
                    <div class="shopping-div">
                        |<span class="header-5"><span class="sp0"><sapn class="sp00">0</sapn></span></span>
                        <a href="#">我的购物袋</a>
                        <section class="box-9">
                            <section class="section9"></section>
                            <p>好像还未登录 ! <a href="#">马上登录</a> 查看购物袋吧 !</p>
                        </section>
                    </div>
                </li>
            </ul>
        </div>
        <!-- ******* 导航 -->
        <nav>
            <div class="nav-main container clearfix">
                <ul class="nav-left">
                    <li style="background-color:#bd1067;"><a href="#">首页</a></li>
                    <li><a href="#">唯品国际</a></li>
                    <li><a href="#">母婴</a></li>
                    <li><a href="#">家居家电</a></li>
                    <li><a href="#">男士</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">生活超市</a></li>
                    <li><a href="#">金融</a></li>
                    <li class="more">
                        <a href="#">更多 <span class="sp2"></span></a>
                        <ul class="box-10">
                            <li>
                                <a href="#"><img src="img/more01.jpg" alt=""></a>
                                <div class="shadow"></div>
                                <div class="box-10-div">
                                    <p>女装</p>
                                </div>
                            </li>
                            <li>
                                <a href="#"><img src="img/more02.jpg" alt=""></a>
                                <div class="shadow"></div>
                                <div class="box-10-div">
                                    <p>鞋包</p>
                                </div>
                            </li>
                            <li>
                                <a href="#"><img src="img/more03.jpg" alt=""></a>
                                <div class="shadow"></div>
                                <div class="box-10-div">
                                    <p>配饰</p>
                                </div>
                            </li>
                            <li>
                                <a href="#"><img src="img/more04.jpg" alt=""></a>
                                <div class="shadow"></div>
                                <div class="box-10-div">
                                    <p>运动</p>
                                </div>
                            </li>
                            <li>
                                <a href="#"><img src="img/more05.jpg" alt=""></a>
                                <div class="shadow"></div>
                                <div class="box-10-div">
                                    <p>唯品·奢</p>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav-right">
                    <li><a href="#"><img src="img/yugao.png" alt="">分类</a></li>
                    <li class="yugao">|<a href="#" style="color:#fff;font-size:16px;"><img src="img/fenlei.png" alt="">预告</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <!--*********  -->
    <main style="height:2000px;">
        <!--轮播图  -->
        <div class="lunbo">
            <ul class="lunbo-list container">
                <li class="current"><a href="#"><img src="img/lunbo01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                <div class="prev"> &lt; </div>
                <div class="next"> &gt;</div>
            </ul>
            <ul class="lunbo-bottom">
                <li class="active"><a href="#">时尚风暴 最高满199减100</a></li>|
                <div class="hua"></div>
                <li><a href="#">时尚风暴 最高满199减100</a></li>|
                <li><a href="#">时尚风暴 最高满199减100</a></li>|
                <li><a href="#">时尚风暴 最高满199减100</a></li>
            </ul>
            
        </div>
        <!--  **************************  -->
        <div class="container hot clearfix">
            <div class="top1">
                <img src="img/top03.jpg" alt="">
                <span class="icon-1"></span>
            </div>
            <div class="top2">
                <img src="img/top02.jpg" alt="">
                <span class="icon-2"></span>
            </div>
            <div class="top3">
                <img src="img/top01.jpg" alt="">
                <span class="icon-3"></span>
            </div>
        </div>
        <div class="container new">
            <img src="img/title_v2.jpg" alt="">
        </div>
    </main>
    <!--侧边栏    -->
    <aside>
        <div class="aside">
            <div class="aside-1">
                <div class="info-1">
                    <a href="#" class="fa fa-user-o"></a>
                    <p>账号</p>
                    <div class="info-1-left clearfix">
                        <span class="close"><a href="#"><img src="img/inte_close.png" alt=""></a></span>
                        <span class="login"></span>
                        <p>你好 ! 请 <a href="#">登录</a> | <a href="#">注册</a></p>
                        <section class="sec">
                            <section class="dingdan">
                                <a href="#" class="fa fa-file-text">
                                    <p>我的订单</p>
                                </a>
                            </section>
                            <section class="xiaoxi">
                                <a href="#" class="fa fa-envelope">
                                    <p>我的消息</p>
                                </a>
                            </section>
                        </section>
                        <p class="clue"><a href="#" style="color:blue;float:right;">会员俱乐部</a></p>
                    </div>
                </div>
                <div class="info-2">
                    <a href="#">
                    <span class="sprite-1"></span>
                    <p>购<br>物<br>袋</p>
                    <section class="yuan">0</section>
                </a>
                </div>
                <div class="info info-3">
                    <a href="#" class="fa fa-money"></a>
                    <div class="info-left info-3-left">
                        <a href="#">我的优惠券</a>
                    </div>
                </div>
                <div class="info info-4">
                    <a href="#" class="fa fa-heart-o"></a>
                    <div class="info-left info-4-left">
                        <a href="#">品牌收藏</a>
                    </div>
                </div>
                <div class="info info-5">
                    <a href="#" class="fa fa-star-o"></a>
                    <div class="info-left info-5-left">
                        <a href="#">商品收藏</a>
                    </div>
                </div>
                <div class="info info-6">
                    <a href="#" class="fa fa-history"></a>
                    <div class="info-left info-6-left">
                        <a href="#">我的足迹</a>
                    </div>
                </div>
            </div>
            <div class="aside-2">
                <div class="info info-7">
                    <a href="#" class="fa fa-edit (alias)"></a>
                    <div class="info-left info-7-left">
                        <a href="#">会员反馈</a>
                    </div>
                </div>
                <div class="info info-8">
                    <a href="#" class="fa fa-hand-o-up"></a>
                    <div class="info-left info-8-left">
                        <a href="#">返回顶部</a>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <script src="./js/index.js"></script>
</body>

</html>
<script>
   
</script>